Виджеты. Column Row Container

➡️Скачать презентацию. Flutter Column Row Container
➡️Скачать шпаргалку Виджет Row Column
➡️Ссылка на репозиторий с кодом этого урока

Выравнивание виджетов

Для демонстрации этой возможности, добавим несколько карточек с роллами и обернёх их в строку или колонку.

Внутри виджета HomeWidget() обернем виджет RollCard() в строку Row()

1. Нажимаем правой кнопки мыши на виджет RollCard()
2. Выбираем пункт Refactor…
3. Выбираем пункт Wrap with Row

Так работает через VS Code

Добавим в строку три карточки RollCard()
По умолчанию они выравнены с слевой стороны в начале строки.

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("Container"),
      ),
      body: Center(
        child: Row(
          children: [
            RollCard(),
            RollCard(),
            RollCard(),
          ],
        ),
      ),
    );
  }
}
                  

Направления главной и поперечной оси

Управлять выравниванием дочерних элементов в строке или столбце можно с помощью свойств mainAxisAlignment и crossAxisAlignment.

Для Row - главная ось горизонтальнвя, поперечная ось вертикальная
Для Column - главна ось вертикальная, поперечная ось горизонтальная

• Главная ось для Row - горизонтальная
• Главная ось для Column - вертикальная
• Поперечная ось - перпендикулярная главной оси

Обернём виджет Row в виджет Container и установим цвет фона, чтобы лучше было видно границы для демонстрации выравнения элементов.

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          centerTitle: true,
          title: const Text("Container"),
      ),
      body: Center(
          child: Container(
            decoration: BoxDecoration(
              color: Color.fromARGB(139, 33, 149, 246)
            ),
            child: Row(
              children: [
                RollCard(),
                RollCard(),
                RollCard(),
              ],
            ),
          ),
      ),
    );
  }
}